import { useEffect, useState } from 'react'
import './App.css'

function App() {

  const initial = { title: '', completed: false };
  const [newTodo, setNewTodo] = useState('');
  const [editedTodo ,setEditedTodo] = useState(initial);
  const [todos, setTodos] = useState([
    {id: 1,title: '创建项目', completed : true},
    {id: 2,title: 'JSX', completed : false},
    {id: 3,title: '组件化', completed : false},
    {id: 4,title: 'hooks', completed : false}
  ]);

  // 获取输入框值
  const changeNewTodo = (e) => {
    setNewTodo(e.target.value);
  }
  // 按下Enter添加
  const addTodo = (e) => {
    if (e.code === 'Enter' && newTodo) {
      setTodos([...todos, {id: todos.length +1, title: newTodo, completed: false}]);
      setNewTodo('');
    }
  }
  // 更改选中状态
  const changeState = (e, currentTodo) => {
    currentTodo.completed = e.target.checked;
    setTodos([...todos]);
  }
  // 删除
  const removeTodo  = (todo) => {
    setTodos(todos.filter(item => item.id !== todo.id));
  }
  // 双击编辑事件
  const editTodo =  (todo) => {
    setEditedTodo({...todo});
  }
  const onEditing = (e) => {
    const title = e.target.value;
    if (title) {
      setEditedTodo({...editedTodo, title: e.target.value});
    } else {
      removeTodo(editedTodo);
    }
  }
  const onEdited = (e) => {
    if (e.code === 'Enter') {
      if (editedTodo.title) {
        const todo = todos.find(todo => todo.id === editedTodo.id);
        todo.title = editedTodo.title;
        setTodos([...todos]);
      }
      setEditedTodo(initial);
    }
  }
  const cancelEdit = (e) => {
    setEditedTodo(initial);
  }
  // 获取input焦点
  let inputRef = null;
  const setEditInputRef = (e,todo) => {
    if (editedTodo.id === todo.id) {
      inputRef = e;
    }
  }
  useEffect (() => {
    //副作用中执行设置焦点
    if (editedTodo.id) {
      inputRef.focus();
    }
  }, [editedTodo])
  return (
    <div className="App">
      <header>
        <h2>我的待办事项</h2>
        <div>
          <input className='new-todo' autoFocus autoComplete='off' placeholder='请输入待办项' value={newTodo} onChange= { changeNewTodo } onKeyUp= { addTodo }/>
          {/* <button onClick={ () => addTodo() }>添加待办</button> */}
        </div>
      </header>
      <main>
        <section>
          <h3>待办项</h3>
          <ul className='todo-list'>
            {
              todos.map((todo) => (
                <li className={["todo", todo.completed ? "completed" : "", editedTodo.title && editedTodo.id === todo.id ? "editing" : ""].join(" ")}  key={todo.id}> 
                  <input className='toggle' type="checkbox" checked={todo.completed} onChange = { e=> changeState(e,todo) } />
                  <div className='view'>
                    <span onDoubleClick={ () => editTodo(todo) }> { todo.title}</span>
                    <button className='del-todo' onClick={ () => removeTodo(todo)}>删除</button>
                  </div>
                  <input className='edit' type="text" ref={ e => setEditInputRef(e, todo)} value= { editedTodo.title } onChange= { onEditing } onKeyUp = { onEdited } onBlur = { cancelEdit } />
                </li>
              ))
            }
          </ul>
        </section>
      </main>
    </div>
  )
}

export default App
